<template>
	<view class="bg">
		<view class="xiala">
			<image src="../../static/date.png" style="width: 70rpx;height: 70rpx;"></image>
			  <picker mode="date" :value="date"  @change="bindDateChange">
			  			<view class='middle-item' hover-class="opcity" hover-stay-time="150">
			  			<label>就餐日期：</label>
			  				<view class="right">{{date}}</view>
			  			</view>
			  		</picker>
		</view>
		<!-- <view class="xiala">
			<image src="../../static/time.png" style="width: 80rpx;height: 80rpx;"></image>
			  <view class="uni-form-item uni-column">
			          <picker @change="timeType" :range="timeTypeArray">
			              <label>就餐时间段：</label>
			              <label class="">{{ timeTypeArrayType }}</label>
			          </picker>
			  </view>
		</view> -->
		
		<view class="xiala">
			<image src="../../static/table.png" style="width: 80rpx;height: 80rpx;"></image>
			  <view class="uni-form-item uni-column">
			          <picker @change="tableType" :range="tableTypeArray">
			              <label>桌子类型：</label>
			              <label class="">{{ tableTypeArrayType }}</label>
						  
			          </picker>
			  </view>
		</view>
		
		<view class="sm">
			<view class="shuoming">预约查询</view>
				<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
					小桌
					总数：12张 
					剩余：6张
				</view>
				<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
					中桌
					总数：8张
					剩余：5张
				</view>
				<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
					大桌
					总数：5张
					剩余：5张
				</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				timeTypeArray:['午市初：09：00-11：00','午市中：11：00-13：00','午市末：13：00-16：00',
				'晚市初：16：00-18：00','晚市中：18：00-20：00','晚市末：20：00-23：00'],
				timeTypeIndex:0,
				timeTypeArrayType:'---请选择---',
				tableTypeArray:['小桌（1-3人）','中桌（4-6人）','大桌（7-9人）'],
				tableTypeIndex:0,
				tableTypeArrayType:'---请选择---',
			};
		},
		onShow() {
			this.timeProcessing()
		},
		methods: {
			timeType(e) {
			    this.timeTypeIndex = e.target.value;
			    this.timeTypeArrayType=this.timeTypeArray[this.timeTypeIndex];
			   },
			   tableType(e) {
			       this.tableTypeIndex = e.target.value;
			       this.tableTypeArrayType=this.tableTypeArray[this.tableTypeIndex]
			  },
			   bindDateChange(e){
			   	this.date=e.target.value;
			   	},
				onNavigationBarButtonTap(e){
					const _this = this;
					const token = uni.getStorageSync('token');
				   uni.showModal({
					content:'确定预约吗？',
					success:(res) => {
						if (res.confirm) {
							uni.request({
								url: 'http://10.50.28.38:8080/reserveTable',
								method: 'POST',
								data: {
									reserveEnd:_this.date,
									reserveStart:_this.date,
									tableType : _this.tableTypeIndex, 
								},
								header: {
									'Content-Type':'application/json',
									Authorization: token
								},						
								success: (res) => {
									if(res.data.code == -9){
										uni.showToast({
											icon: 'none',
											title: '您已经取过号了',
											duration:2000,
										});
										return;
									}
									uni.showToast({
										title:"取号成功",
										icon:'none'
									})
									uni.reLaunch({
										url:'./home'
									})
									},
							fail: () => {console.log("失败")},
								complete: () => {}
							});
										uni.showToast({
											title:"预约成功",
											icon:'none'
										})
							uni.reLaunch({
								url:'./home'
							})
						}
					}
				   })
				},
				timeProcessing(){
					let timeDate = "2019-06-24 11:08:48";
					let Time = new Date(timeDate);
					console.log(Time)//Mon Jun 24 2019 11:08:48 GMT+0800 (中国标准时间)
					let timestemp = Time.getTime();
					console.log(timestemp)
					//1561345728000
				
				} 
		},
}
</script>

<style lang="scss">
	.bg{
		width: 100vw;
		height: 100vh;
		background-color:#f3f3f3;
	}
	.xiala{
		border:3px solid orangered;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.uni-form-item{
		// border:5px solid orange;
		margin-top: 20rpx;
	}
	.sm{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
		box-sizing: border-box;
		// border:2px solid orange;
		.shuoming{
			text-align: center;
			margin-bottom: 10rpx;
			font-weight: bold;
			font-size: 40rpx;
		}
		.shuoming1{
			text-align: center;
		}
		.shuoming2{
			border:2px solid orange;
			display: flex;
			flex-direction: column;
			// justify-content: space-evenly;
			text-align: center;
			margin-top: 10rpx;
		}
	}
	.xiala{
		margin-top: 10rpx;
	}
</style>
